<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 
				1.什么时候使用循环
					多次重复的执行同一个操作.
				2.什么数据使用循环
					1.数组
					2.对象
					3.数组套对象(集合)
			 -->
			 
			 <!--
					1. 遍历数据 将数组中的数据在页面中展现
			  -->
			 <p v-for="item in array" v-text="item">
				<!-- {{item}} -->
			 </p>
			 
			 <!-- 2. 获取下标  30上课
				  语法: v-for="(遍历的元素,遍历的下标) in array"
			  -->
			 <p v-for="(item,index) in array">
					下标:{{index}}~~~数据值:{{item}}
			 </p>
			 <hr >
			 <!-- 2. 遍历对象 
				v-for="(value,key,index下标)
			 -->
			 <p v-for="(value,key,index) in user">
				 {{index}}~~~~{{key}}~~~~{{value}}
			 </p>
			 
			 <hr />
			 <!-- 3. 遍历"集合" -->
			 <div v-for="user in userList">
				 ID: {{user.id}}
				 | name: {{user.name}} 
				 | age:{{user.age}}
				<div v-for="(value,key,index) in user">
					 {{key}}~~~{{value}}~~~{{index}}
				 </div>
			 </div>
			 
			 <!-- 总结:
				 1. 如果遍历数组 参数 (value,index)
				 2. 如果遍历对象 参数 (value,key,index)
				 特点: 遍历数据在页面中展现
			 -->
			 
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					array: ["郭晶晶","马龙","姚明"],
					user: {
						id: 100,
						name: "tomcat",
						age: 18
					},
					userList: [
						{
							id: 100,
							name: "tomcat",
							age: 18
						},
						{
							id: 200,
							name: "mysql",
							age: 20
						}
					]
				}
			})
		</script>	
	</body>
</html>
